<script lang="ts" setup>
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
const props = withDefaults(defineProps<{
  collapse: boolean,
  mirroring?: boolean
}>(), {
  mirroring: false
})
</script>

<template>
  <div class="collapse-side" :class="{ 'is-mirroring': props.mirroring && !props.collapse }">
    <el-icon>
      <arrow-left v-if="!props.mirroring && props.collapse" />
      <arrow-right v-else />
    </el-icon>
  </div>
</template>

<style lang="scss" scoped>
.collapse-side {
  width: 19px;
  height: 70px;
  background-color: #00000033;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: polygon(0 0, 100% 15%, 100% 85%, 0 100%);
  cursor: pointer;
  transition: all .5s ease-out;
  &.is-mirroring {
    transform-origin: left center;
    transform: rotateY(180deg);
  }
}
</style>
